<template>
  <div class="shopSwiperBox">
    <swiper :options="swiperOption2" class="swiper swiperOption2" ref="swiperOption2">
    <swiper-slide class="swiper-slide"><img src="../assets/img/roujuan.png" alt=""></swiper-slide>
    <swiper-slide class="swiper-slide"><img src="../assets/img/roujuan.png" alt=""></swiper-slide>
    <swiper-slide class="swiper-slide"><img src="../assets/img/roujuan.png" alt=""></swiper-slide>
    <swiper-slide class="swiper-slide"><img src="../assets/img/roujuan.png" alt=""></swiper-slide>
    <!-- <div class="swiper-pagination" slot="pagination"></div> -->
    <!-- <div class="swiper-button-prev" slot="button-prev" v-if="false"></div>
    <div class="swiper-button-next" slot="button-next" v-if="false"></div> -->
  </swiper>
  <swiper :options="swiperOption" class="swiper swiperOption" ref="swiperOption">
    <swiper-slide class="swiper-slide"><img src="../assets/img/roujuan.png" alt=""></swiper-slide>
    <swiper-slide class="swiper-slide"><img src="../assets/img/roujuan.png" alt=""></swiper-slide>
    <swiper-slide class="swiper-slide"><img src="../assets/img/roujuan.png" alt=""></swiper-slide>
    <swiper-slide class="swiper-slide"><img src="../assets/img/roujuan.png" alt=""></swiper-slide>
    <!-- <div class="swiper-pagination" slot="pagination"></div> -->
    <div class="swiper-button-prev" slot="button-prev" v-if="false"></div>
    <div class="swiper-button-next" slot="button-next" v-if="false"></div>
  </swiper>
  </div>
</template>
<script>

export default {
  components:{
  },
  data() {
    return {
      swiperOption: {
        pagination: {
          el: ".swiper-pagination",
          clickable: true // 允许点击小圆点跳转
        },
        // autoplay: {
        //   delay: 3000,
        //   disableOnInteraction: false // 手动切换之后继续自动轮播
        // },
        slidesPerView: 4,
        spaceBetween:20,
        loop: true,
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev"
        }
      },
      swiperOption2:{
        // thumbs: {
        //   swiper: this.swiperOption
        // }
        loop: true,
      }
    };
  },
  mounted(){
    this.$nextTick(() => {
      const swiperTop = this.$refs.swiperOption2.swiper
      const swiperThumbs = this.$refs.swiperOption.swiper
      swiperTop.controller.control = swiperThumbs
      swiperThumbs.controller.control = swiperTop
    })
  },
};
</script>
<style scoped>
  .shopSwiperBox{
    width: 100%;
  }
  .swiper{
    width: 100%;
  }
  .swiper-slide img{
    width: 100%;
  }
  .swiperOption{
    margin-top: 20px;
  }
</style>